<!--
 * @Author: CoderLPF
 * @Date: 2020-03-31 15:23:37
 * @LastEditTime: 2020-04-21 16:27:23
 * @LastEditors: CoderLPF
 * @Description: 
 * @FilePath: \fzx-system-fd\src\views\modules\index\detail\nodeprogress.vue
 -->
<template>
  <el-row :gutter="6">
    <el-col :span="24" class="col-flex">
      <el-col class="breadcrumb-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/main' }">信息管理</el-breadcrumb-item>
          <el-breadcrumb-item>节点进度</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col class="maincont-container">
        <!-- 筛选条件 -->
        <div class="filter-container">
          <el-select
            v-model="filterCon.tenders"
            style="color:black"
            size="small"
            placeholder="选择标段"
          >
            <el-option v-for="item in tenderslist" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="filterCon.major" style="color:black" size="small" placeholder="选择专业">
            <el-option v-for="item in majorlist" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <!-- <el-select v-model="filterCon.state" style="color:black" size="small" placeholder="选择状态">
            <el-option>策划</el-option>
            <el-option>外业</el-option>
            <el-option>内业</el-option>
            <el-option>总体校审</el-option>
            <el-option>成果提交</el-option>
          </el-select>-->
          <el-button @click="dofilter" size="small" type="primary">筛选</el-button>
          <el-button @click="doreset" size="small" type="warning">重置</el-button>
        </div>
        <!-- 节点进度显示容器 -->
        <div class="progress-container">
          <!-- 静态步骤区域 -->
          <el-row class="progress-header">
            <div class="title">工程编号</div>
            <div class="step">开始</div>
            <div class="step">策划</div>
            <div class="step">外业</div>
            <div class="step">内业</div>
            <div class="step">总体校审</div>
            <div class="step">成果提交</div>
            <div class="step">工程结束</div>
          </el-row>
          <!-- 进度图显示主区域 -->
          <vue-seamless-scroll class="progress-body" :data="dataVO" :class-option="scrolloption">
            <div v-for="item in dataVO" :key="item.id" class="progress-item">
              <div :title="item.project_id" class="item-projectid">{{item.project_id}}</div>
              <el-tooltip
                :enterable="false"
                v-for="(pro,index) in item.progress"
                :key="index"
                :content="pro.title+' '+pro.time"
              >
                <div :class="'item-status'+' '+pro.status">{{pro.status==='runing'?'进行中':''}}</div>
              </el-tooltip>
            </div>
          </vue-seamless-scroll>
        </div>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      filterCon: {
        major: "",
        state: "",
        tenders: ""
      },
      dataList: [],
      origData: []
      // datalist: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    };
  },
  computed: {
    tenderslist() {
      return [
        ...new Set(
          this.dataList.map(item => {
            return item.tenders;
          })
        )
      ];
    },
    majorlist() {
      return [
        ...new Set(
          this.dataList.map(item => {
            return item.major;
          })
        )
      ];
    },
    scrolloption() {
      return {
        step: 0.2,
        limitMoveNum: 11,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        // singleHeight: 47,
        waitTime: 0
      };
    },
    dataVO() {
      let showdata = [];
      this.origData.map(item => {
        let temp = {};
        temp.project_id = item.project_id;
        temp.progress = [];

        if (
          item.consultation_verification &&
          item.consultation_verification !== ""
        ) {
          // 全部结束
          temp.progress.push({
            title: "完成时间",
            time: item.consultation_verification,
            status: "finish"
          });
          temp.progress.push({ title: "工程结束", time: "", status: "finish" });
        }
        if (
          item.prospecting_verification &&
          item.prospecting_verification !== ""
        ) {
          temp.progress.unshift({
            title: "完成时间",
            time: item.prospecting_verification,
            status: "finish"
          });
        }
        if (item.inside_work && item.inside_work !== "") {
          temp.progress.unshift({
            title: "完成时间",
            time: item.inside_work,
            status: "finish"
          });
        }
        if (item.field_work && item.field_work !== "") {
          temp.progress.unshift({
            title: "完成时间",
            time: item.field_work,
            status: "finish"
          });
        }
        if (item.plan && item.plan !== "") {
          temp.progress.unshift({
            title: "完成时间",
            time: item.plan,
            status: "finish"
          });
        }
        temp.progress.unshift({
          title: "创建时间",
          time: item.create_time,
          status: "finish"
        });
        if (temp.progress.length < 7) {
          temp.progress.push({ title: "进行中", time: "", status: "runing" });
        }

        let rest = 7 - temp.progress.length;

        if (rest > 0) {
          for (let i = 0; i < rest; i++) {
            temp.progress.push({ title: "未开始", time: "", status: "" });
          }
        }
        console.log(temp);
        showdata.push(temp);
      });
      return showdata;
    }
  },

  created() {
    this.$api.nodeprogress
      .query({ subject_id: this.$store.state.projectInfo.projectName })
      .then(res => {
        if (res.code === 200) {
          this.origData = res.data;
          this.dataList = res.data;
        }
      });
  },

  methods: {
    dofilter() {
      let temp = [];
      console.log(this.filterCon);
      temp = this.dataList.filter(item => {
        return (
          (this.filterCon.tenders !== ""
            ? item.tenders === this.filterCon.tenders
            : 1 === 1) &&
          (this.filterCon.major !== ""
            ? item.major === this.filterCon.major
            : 1 === 1)
        );
      });
      console.log(temp);
      this.origData = temp;
    },
    doreset() {
      this.origData = [];
      this.dataList.forEach(item => {
        this.origData.push(item);
      });
      this.filterCon.tenders = "";
      this.filterCon.major = "";
    }
  }
};
</script>

<style lang="less" scoped>
.col-flex {
  padding-top: 30px;
  height: 100%;
  box-sizing: border-box;
  .breadcrumb-container {
    height: 30px;
    margin-top: -20px;
  }
  .maincont-container {
    height: calc(~"100% - 10px");
    margin-top: 3px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;

    .filter-container {
      width: 100%;
      margin: auto;
      text-align: center;
      justify-content: start;
      border-bottom: 1px #eeee solid;
      box-sizing: border-box;
      .el-select {
        margin: 5px !important;
      }
    }

    // 节点进度数据显示容器
    .progress-container {
      flex: 1;
      width: 100%;
      margin: 5px auto;
      overflow: hidden;

      .progress-header {
        box-sizing: border-box;
        display: flex;
        height: 40px;
        background-color: #f2f2f2;
        .title {
          width: 120px;
          line-height: 40px;
        }
        .step {
          line-height: 40px;
          margin: auto;
          flex: 1;
          border-right: 1px solid rgba(200, 200, 200, 0.5);
        }
      }

      .progress-body {
        height: calc(~"100% - 50px");
        text-align: left;
        overflow: hidden;
        margin-top: 2px;
        box-sizing: border-box;

        .progress-item {
          margin: 5px 0px;
          height: 40px;
          display: flex;
          justify-content: start;
          justify-items: left;
          vertical-align: middle;
          border-bottom: lightblue 1px solid;
          // background-color: rgba(200, 200, 200, 0.5);
          .item-projectid {
            line-height: 40px;
            height: 40px;
            width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 5px;
          }

          .item-status {
            // display: inline-block;
            color: white;
            line-height: 30px;
            text-align: center;
            margin: auto;
            height: 30px;
            // width: 14.28571%;
            flex: 1;
            // border-right: 1px solid rgba(200, 200, 200, 0.5);
            background-color: rgba(200, 200, 200, 0.5);
            box-sizing: border-box;
          }

          .item-status:hover {
            cursor: pointer;
            // background-color: rgba(200, 200, 200, 0.5);
          }

          .finish {
            background-color: #48cfae;
          }

          .runing {
            background-color: rgba(255, 165, 0, 0.5);
          }
        }
      }
      .progress-body::-webkit-scrollbar {
        width: 0;
      }
    }
  }
}
</style>

<style lang="less">
</style>